<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>在线视频课堂</title>
    <style>
        body, html {
            margin: 0;
            padding: 0;
            width: 100%;
            height: 100%;
            display: flex;
            justify-content: center;
            align-items: center;
            background-color: #f4f4f4;
        }
        .title {
            position: relative;
            overflow: hidden;
            white-space: nowrap;
        }
        .title h2 {
            width: 100%;
            height: 75px;
            text-align: center;
        }
        .container {
            display: flex;
            width: 80%;
            max-width: 1200px;
        }
        .video-player {
            flex: 3;
            /* padding: 20px; */
            background-color: #333;
            color: white;
            
        }
        .videoPlayer {
            background-color: #27b080;
        }
        video {
            width: 100%;
            height: 500px;
            border: none;
        }
        .chat {
            flex: 1;
            padding-left: 20px;
            background-color: #f4f4f4;
            border-left: 1px solid #ccc;
        }
        .chat-input {
            display: flex;
            align-items: center;
            margin-top: 10px;
        }
        .chat-input textarea {
            flex: 1;
            padding: 10px;
            margin-right: 10px;
            border-radius: 5px;
            border: 1px solid #ccc;
            resize: none;
        }
        .chat-input button {
            padding: 10px 20px;
            background-color: #4CAF50;
            color: white;
            border: none;
            border-radius: 5px;
            cursor: pointer;
        }
        .chat-input button:hover {
            background-color: #45a049;
        }
        .chat-messages {
            height: 420px;
            overflow-y: auto;
            margin-bottom: 10px;
            border: 1px solid #ccc;
            padding: 10px;
            background-color: white;
        }
        .qiandao {
          background-image: url('qiandao.png'); /* 设置图片路径 */
          background-size: cover; /* 背景图片覆盖整个按钮 */
          background-repeat: no-repeat; /* 不重复背景图片 */
          border: none; /* 移除边框 */
          color: white; /* 设置文字颜色 */
          padding: 10px 20px; /* 设置内边距 */
          text-align: center; /* 文字居中对齐 */
          text-decoration: none; /* 移除文本装饰 */
          display: inline-block; /* 设置为内联块级元素 */
          font-size: 16px; /* 设置文字大小 */
          margin: 4px 2px; /* 设置外边距 */
          cursor: pointer; /* 设置鼠标光标为指针形状 */
        }
      
        .qiandao:hover {
          background-color: #555; /* 鼠标悬停时的背景颜色 */
        }
    </style>
</head>
<body>

    <!-- <div class="title">
        <h2>在线课堂</h2>
    </div> -->
    
    <div class="container">
        
        <div class="video-player">
            
            <div style="background-color: #c7c3c3;">
                <!-- <input type="input" id="num" >课堂编号</input> -->
                课堂编号
                <select id="ketang_num">
                  <option value="1">英语口语课</option>
                  <option value="2">英语语法课</option>
                  <option value="3">英语写作课</option>
                </select>
            </div>
            <video id="videoPlayer" class="videoPlayer" controls autoplay>
                <source src="teacher4.mp4" type="video/mp4">
                您的浏览器不支持HTML5视频播放器。
            </video>
            <video id="videoPlayer2" class="videoPlayer" style="display:none" controls autoplay>
                您的浏览器不支持HTML5视频播放器。
            </video>
            <div class="controls">
                <button onclick="playVideo()">播放</button>
                <button onclick="stopVideo()">停止</button>
                <button onclick="pauseVideo()">暂停</button>
                <button onclick="continueVideo()">继续</button>
                <button onclick="kejianVideo()">课件</button>
                <a style="color:#45a049;margin-left: 100px;" href="#">思维导图</a>
                
            </div>
            
        </div>
        <div class="chat">
            
            <div class="chat-messages" id="chatMessages"></div>
            <button >签到</button>
            <button onclick="handQuestion()">举手</button>
            <button id="btnStart" >开启语音</button>
            <button id="btnStop" style="display: none;">语音停止</button>
            <input type="hidden" id="sessionid" value="0"/>
            <input type="hidden" id="push_url" value=""/>
            <input type="hidden" id="asr_mode" value="2pass" />
            <input type="hidden" id="wssip" value="wss://127.0.0.1:10095/" />
            <div class="chat-input">
                <textarea id="chatMessage" placeholder="输入聊天消息..."></textarea>
                <button id="sendMsg">发送消息</button>
            </div>
        </div>
    </div>

</body>
<script src="srs.sdk.js"></script>
<script type="text/javascript" src="http://cdn.sockjs.org/sockjs-0.3.4.js"></script>
<script type="text/javascript" src="https://ajax.aspnetcdn.com/ajax/jquery/jquery-2.1.1.min.js"></script>

<!--funasr语音识别-->
<script type="text/javascript" src="static/mpegts-1.7.3.min.js"></script>
<script type="text/javascript" src="http://cdn.sockjs.org/sockjs-0.3.4.js"></script>
<script src="http://code.jquery.com/jquery-2.1.1.min.js"></script>
<script src="static/recorder-core.js" charset="UTF-8"></script>
<script src="static/wav.js" charset="UTF-8"></script>
<script src="static/pcm.js" charset="UTF-8"></script>
<script src="static/ws_connect.js" charset="utf-8"></script>
<!-- <script src="static/ketang-test.js" charset="utf-8"></script> -->
<script src="static/ketang-srs3.js" charset="utf-8"></script>



</html>
